$num: 0; //循环计数器
$sum: 70; //循环次数，用于控制生成calss的数量
$rate: 2; //比例，由于设计稿2rpx=1px，故此处比例为2
$step: 2; // 步长，2 4 6 8 10
$pixis: 'rpx'; //单位

//尺寸数组
$size_name_list: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl';
$rounded_size_list: 10, 12, 14, 16, 18, 20, 22, 24, 26; //圆角

@while $num < ($sum + 1) {
	.index-#{$num} {
		z-index: #{$num};
	}
	//margin
	.m-#{$num} {
		margin: #{$num * $rate}#{$pixis};
	}
	.mx-#{$num} {
		margin-left: #{$num * $rate}#{$pixis};
		margin-right: #{$num * $rate}#{$pixis};
	}
	.my-#{$num} {
		margin-top: #{$num * $rate}#{$pixis};
		margin-bottom: #{$num * $rate}#{$pixis};
	}
	.ml-#{$num} {
		margin-left: #{$num * $rate}#{$pixis};
	}
	.mt-#{$num} {
		margin-top: #{$num * $rate}#{$pixis};
	}
	.mr-#{$num} {
		margin-right: #{$num * $rate}#{$pixis};
	}
	.mb-#{$num} {
		margin-bottom: #{$num * $rate}#{$pixis};
	}
	//padding
	.p-#{$num} {
		padding: #{$num * $rate}#{$pixis};
	}
	.px-#{$num} {
		padding-left: #{$num * $rate}#{$pixis};
		padding-right: #{$num * $rate}#{$pixis};
	}
	.py-#{$num} {
		padding-top: #{$num * $rate}#{$pixis};
		padding-bottom: #{$num * $rate}#{$pixis};
	}
	.pl-#{$num} {
		padding-left: #{$num * $rate}#{$pixis};
	}
	.pt-#{$num} {
		padding-top: #{$num * $rate}#{$pixis};
	}
	.pr-#{$num} {
		padding-right: #{$num * $rate}#{$pixis};
	}
	.pb-#{$num} {
		padding-bottom: #{$num * $rate}#{$pixis};
	}
	//width
	.w-#{$num } {
		width: #{$num * $rate}#{$pixis};
	}
	.w-#{$num * 10} {
		width: #{$num * $rate * 10}#{$pixis};
	}
	//height
	.h-#{$num } {
		height: #{$num * $rate}#{$pixis};
	}
	.h-#{$num * 10} {
		height: #{$num * $rate * 10}#{$pixis};
	}
	//定位相关
	.t-#{$num} {
		top: #{$num * $rate}#{$pixis};
	}
	.r-#{$num} {
		right: #{$num * $rate}#{$pixis};
	}
	.b-#{$num} {
		bottom: #{$num * $rate}#{$pixis};
	}
	.l-#{$num} {
		left: #{$num * $rate}#{$pixis};
	}
	$num: $num + $step;
}

// flex占位
$flexNum: 1;
@while $flexNum <= 10 {
	.flex-#{$flexNum} {
		flex: #{$flexNum};
	}
	$flexNum: $flexNum + 1;
}

// 百分比
$whPNum: 5;
$percentage: '%'; //单位
@while $whPNum <= 100 {
	.w-#{$whPNum}p {
		width: #{$whPNum}#{$percentage};
	}
	.h-#{$whPNum}p {
		height: #{$whPNum}#{$percentage};
	}
	.t-#{$whPNum}p {
		top: #{$whPNum}#{$percentage};
	}
	.b-#{$whPNum}p {
		bottom: #{$whPNum}#{$percentage};
	}
	.l-#{$whPNum}p {
		left: #{$whPNum}#{$percentage};
	}
	.r-#{$whPNum}p {
		right: #{$whPNum}#{$percentage};
	}
	$whPNum: $whPNum + 5;
}

$borderNum: 0;
@while $borderNum <= 3 {
	// border
	.border-#{$borderNum} {
		border: #{$borderNum * $rate}#{$pixis} solid;
	}
	.border-r-#{$borderNum} {
		border-right: #{$borderNum * $rate}#{$pixis} solid;
	}
	.border-t-#{$borderNum} {
		border-top: #{$borderNum * $rate}#{$pixis} solid;
	}
	.border-l-#{$borderNum} {
		border-left: #{$borderNum * $rate}#{$pixis} solid;
	}
	.border-b-#{$borderNum} {
		border-bottom: #{$borderNum * $rate}#{$pixis} solid;
	}
	$borderNum: $borderNum + 1;
}

$whNum: 7;
@while $whNum < 31 {
	.wh-#{$whNum * 10} {
		width: #{$whNum * $rate * 10}#{$pixis};
		height: #{$whNum * $rate * 10}#{$pixis};
	}
	$whNum: $whNum + 1;
}

// 字体、边框圆角
@each $size in $size_name_list {
	$i: index($size_name_list, $size); //索引
	$rounded_size: nth(
		$list: $rounded_size_list,
		$n: $i
	);
	.b-radius-#{$size} {
		border-radius: #{$rounded_size * $rate}#{$pixis};
	}
	.b-radius-t-#{$size} {
		border-top-left-radius: #{$rounded_size * $rate}#{$pixis};
		border-top-right-radius: #{$rounded_size * $rate}#{$pixis};
	}
	.b-radius-b-#{$size} {
		border-bottom-left-radius: #{$rounded_size * $rate}#{$pixis};
		border-bottom-right-radius: #{$rounded_size * $rate}#{$pixis};
	}
}
